<%@ page import="com.lengmou.entity.Orders" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lengmou.entity.OrdersInfo" %>
<%@ page import="com.lengmou.entity.Goods" %>
<%@ page import="com.lengmou.service.UsersService" %>
<%@ page import="com.lengmou.service.impl.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="魔法集市">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=1200">
    <meta name="keywords" content="GSC,寿屋,万代,眼镜工厂,千值练,海洋堂,粘土人,MAXFACTORY,ALTER,良笑,三丽鸥,Sanrio,Takaratomy,KADOKAWA,Chara-ani,AmiAmi,手办自营,周边自营,谷子自营">
    <meta name="description" content="魔法集市·自营是专注于二次元的日本代购网站以及动漫周边自营零售网站，为用户提供快捷方便的游戏动漫代购，ACG周边、声优周边、同人商品及其他日系商品一应俱全，目前支持日本亚马逊、虎穴(虎之穴)、骏河屋、Book-off、C-queen(K-books)和Melonbooks(蜜瓜)等网站的代购。与此同时，魔法集市・自营整合来自日本的第一手货源，为大家精心挑选了各种热门人气商品。所有商品均从魔法集市的日本仓库打包发出，配合全新的「喵急便」物流服务直接送达您的手中，您将能获得焕然一新的消费体验">
    <link rel="icon" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <link rel="apple-touch-icon" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <link rel="apple-touch-icon-precomposed" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <link rel="stylesheet" href="http://masadora-js.masadora.net/static/new_masadora/static/css/index.css?_r=20191129m5">
    <link rel="stylesheet" href="http://masadora-js.masadora.net/static/new_masadora/css/member.css?_r=20191129m5">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>个人信息</title>
    <style>
        .left-menu{
            text-align: center;
            float: left;
            display: block;
            background-color: #f6f1fb;
            width: 100px;
        }
        .menu{
            margin-top: 70px;
            margin-left: 80px;
        }
        .right-menu{
            float: left;
            width: 80%;
            height: 100%;
            background-color: #fbfbfb;
        }
        #info{
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('a[action="orders"]').click(function () {
                $("#info").hide(500);
                $("#money").hide(500);
                $("#edit").hide(500);
                $("#orders").show(500);
            });
            $('a[action="userinfo"]').click(function () {
                $("#money").hide(500);
                $("#orders").hide(500);
                $("#edit").hide(500);
                $("#info").show(500);
            });
            $('a[action="money"]').click(function () {
                $("#info").hide(500);
                $("#orders").hide(500);
                $("#edit").hide(500);
                $("#money").show(500);
            });
            $('a[action="edit"]').click(function () {
                $("#money").hide(500);
                $("#orders").hide(500);
                $("#info").hide(500);
                $("#edit").show(500);
            })
            $("#refresh").click(function () {
                $.post(
                    "userinfo",
                    {userMoney:'1'},function (date) {
                        $("#user-money").html(date.money+"元");
                    },"json"
                );
            });
            $("#pay").click(function () {
                var sum = $("#sum").val();
                if(sum.length!=0){
                    $.post(
                        "adminUser",
                        {money:$("#sum").val()},
                        function (date) {
                            if(date.addMoneyState>0){
                                $("#tishi").html("充值成功").attr("class","ui-toast-box");
                                setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");},1000);
                            }else{
                                $("#tishi").html("充值失败，请检查您的网络").attr("class","ui-toast-box");
                                setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");},1000);
                            }
                        },"json"
                    );
                }
            });
            var b=false,c=false;
            $("#before-pwd").blur(function () {
                $.post(
                    "userinfo",
                    {beforePwd:$("#before-pwd").val()},function (date) {
                        if(date.beforePwd==1){
                            $("#meg-before-pwd").html("密码正确");
                            $("#edit-pwd").removeAttr('disabled');
                        }else{
                            $("#meg-before-pwd").html("密码错误");
                            $("#edit-pwd").attr({"disabled":"disabled"});
                        }
                    },"json"
                );
            });
            $("#new-pwd").blur(function () {
                if($(this).val().length<6){
                    $("#meg-new-pwd").html("密码必须大于6位数");
                    b=false;
                }else{
                    $("#meg-new-pwd").html("新密码填写正确");
                    b=true;
                }
            });

            $("#new-pwd-2").blur(function () {
                if($("#new-pwd-2").val()==$("#new-pwd").val()){
                    $("#meg-new-pwd-2").html("新密码填写一致");
                    c=true;
                }else{
                    $("#meg-new-pwd-2").html("两次输入密码不一致");
                    c=false;
                }
            });
            $("#edit-pwd").click(function () {
                if(b&&c){
                    $.post(
                        "userinfo",
                        {pwd:$("#new-pwd").val()},function (date) {
                            if(date.pwd==1){
                                $("#tishi").html("密码修改成功,请重新登录").attr("class","ui-toast-box");
                                setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");location.href="exit"},1000);
                            }else{
                                $("#tishi").html("修改失败，请检查您的网络").attr("class","ui-toast-box");
                                setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");},1000);
                            }
                        },"json"
                    );
                }else{
                    $("#tishi").html("友情提示:请检查信息填写正确后尝试").attr("class","ui-toast-box");
                    setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");},1000);
                }
            });
            var d = false;
            $("#tel").blur(function () {
                if($(this).val().length==11){
                    if(Number($(this).val())!=NaN){
                        $.post(
                            "userinfo",
                                {tel:$("#tel").val()},function (date) {
                                if(date.tel==1){
                                    $("#meg-tel").html("手机号可用");
                                    $("#edit-tel").removeAttr("disabled");
                                }else{
                                    $("#meg-tel").html("该手机号码已被使用");
                                    $("#edit-tel").attr({"disabled":"disabled"});
                                }

                        },"json");
                    }else{
                       $("#meg-tel").html("请输入正确的手机号码");
                        $("#edit-tel").attr({"disabled":"disabled"});
                    }
                }else {
                    $("#meg-tel").html("请输入11位手机号码");
                    $("#edit-tel").attr({"disabled":"disabled"});
                }
            });
            $("#edit-tel").click(function () {
                $.post(
                    "userinfo",
                    {setTel:$("#tel").val()},function (date) {
                        if(date.setTel==1){
                            $("#tishi").html("修改成功").attr("class","ui-toast-box");
                            setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");location.href="user.jsp"},1000);
                        }else{
                            $("#tishi").html("修改失败，请检查您的网络").attr("class","ui-toast-box");
                            setTimeout(function () {$("#tishi").attr("class","ui-toast-box h");},1000);
                        }
                    },"json"
                )
            });

        })
    </script>
</head>
<body>
<%@include file="header.jsp"%>
<div class="bg">
    <div class="main c">
        <ul class="member-nav">
            <li class="member-nav-li">
                <h4>个人中心</h4>
                <a href="#" action="userinfo">个人资料</a>
                <a href="#" action="orders">我的订单&nbsp;<span class="color-orange">${orders.size()}</span></a>
                <a href="#" action="money">账户余额</a>
                <a href="#" action="edit">修改信息</a>
            </li>
        </ul>
        <div id="board" class="right_main" view="cn-orders"><div class="ui-panel-box" data-status="1">
            <div class="head">
            </div>
            <div class="body">
                <div id="info" >
                    <div class="container">
                        <h2>基本信息</h2>
                        <ul class="list-group">
                            <li class="list-group-item">账号：${user.username}</li>
                            <li class="list-group-item">手机号：${user.phoneNum}</li>
                            <li class="list-group-item">用户ID：${user.id}</li>
                        </ul>
                    </div>
                </div>
                    <div id="orders" style="display: none">
                        <c:if test="${orders.size()==0}">
                            <p class="p-banner">这里还没有订单</p>
                        </c:if>
                        <%
                            OrdersInfoServiceImpl ordinfos = new OrdersInfoServiceImpl();
                            GoodsServiceImpl gs = new GoodsServiceImpl();
                        %>
                            <ul class="list-group">
                            <c:forEach items="${orders}" var="order">
                                <%
                                    Orders order = (Orders) pageContext.getAttribute("order");
                                    List<OrdersInfo> ordersInfos = ordinfos.querysOrdersInfoByOrdersId(order.getId());
                                    pageContext.setAttribute("infos",ordersInfos);
                                %>
                                <li class="list-group-item">
                                <p>创建时间：${order.createtime} 订单Id：${order.id}</p>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                            <c:forEach items="${infos}" var="info">
                                <%
                                    OrdersInfo info = (OrdersInfo)pageContext.getAttribute("info");
                                    Goods goods = gs.queryGoodsByGoodsId(info.getGoods_id());
                                    pageContext.setAttribute("goods",goods);
                                %>
                                <tr>
                                    <td>${goods.goodsname}</td>
                                    <td>${goods.price}</td>
                                    <td>${info.num}</td>
                                </tr>
                            </c:forEach>
                                </tbody>
                            </table>
                                </li>
                            </c:forEach>
                            </ul>
                    </div>
                <div id="money" style="display: none">
                    <div class="card">
                        <%
                            UsersService us = new UsersServiceImpl();
                            User u = us.existsById(user.getId());
                            pageContext.setAttribute("u",u);
                        %>
                        <div class="card-body"><h2>我的余额：<b id="user-money" style="color: #ff5700">${u.money}元</b><button id="refresh" class="btn" >刷新</button></h2></div>
                        <div class="card-body">
                            <div class="input-group-prepend">
                            <span class="input-group-text">充值</span>
                            <input id="sum" style="width: 20%;height: 40px;" type="number" class="form-control" placeholder="金额">
                                <div class="input-group-append">
                                    <button id="pay" class="btn btn-primary">充值</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="edit" style="display: none">
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header">
                                <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                    修改密码
                                </a>
                            </div>

                            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                <div class="card-body" >
                                    <div style="width: 50%" class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">原密码</span>
                                        </div>
                                        <input id="before-pwd" type="text" class="form-control" placeholder="密码">
                                    </div>
                                    <p id="meg-before-pwd" style="color: #ff5700" ></p>
                                    <div style="width: 50%" class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">新密码</span>
                                        </div>
                                        <input  id="new-pwd" type="text" class="form-control" placeholder="密码">
                                    </div>
                                    <p id="meg-new-pwd" style="color: #ff5700" ></p>
                                    <div style="width: 50%" class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">确认密码</span>
                                        </div>
                                        <input  id="new-pwd-2" type="text" class="form-control" placeholder="再次输入新密码">
                                    </div>
                                    <p id="meg-new-pwd-2" style="color: #ff5700" ></p>
                                 <button  id="edit-pwd" class="btn" >提交</button>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                                    修改手机号码
                                </a>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div style="width: 50%" class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">手机号码</span>
                                        </div>
                                        <input id="tel" type="text" class="form-control" placeholder="手机号码">
                                    </div>
                                    <p id="meg-tel" style="color: #ff5700"></p>
                                    <button id="edit-tel" class="btn" >提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="page"></div>
        </div>
        <script type="text/javascript">
            var avatarDefaultImage = "http://masadora-js.masadora.net/static/new_masadora/images/avatar-default.png";
            var tensoUnboxFee = 150;
            var tensoImageFee = 150;
            var tensoHandlingFee = 300;
            var tensoUnusualFee= 1000;
        </script>

    </div>
</div>
<%@include file="foot.jsp"%>
<div id="tishi" class="ui-toast-box h"></div>
</body>
</html>